<template>
  <div class="all">
      <div class="header-container">
        <div class="header" >   
                <div class="icon-back" v-on:click="back"></div>        
                <div class="title">还价信息</div>
                <div class="icon-more" @click="appear"></div>            
        </div>   
        <div class="more" v-show="show">
            <ul>
            <router-link to="/msg"><li> <i class="msg"></i><span>消息</span></li></router-link>
                <router-link to="/home"><li class="bottom"> <i class="home "></i><span>首页</span></li></router-link>
            </ul>
        </div>
    </div>
    <div class="price-c">
        <div class="bargain" v-if="item.hjstatus==0||!zt(item.hjdate)">已失效</div>
        <div class="bargain" v-else-if="item.hjstatus==2">我的还价被同意</div>
        <div class="bargain" v-else-if="item.hjstatus==3">我的还价被拒绝</div>
        <div class="time">{{getTime(item.hjdate)}}</div>
        <div class="cost">
            我的还价：<span class="red">{{item.hjprice}}元</span><br>
            商品原价：{{item.price}}元<br>
            <span v-show="item.hjstatus==2">还价有效期：{{yxq(item.hjdate)}}</span>
        </div>
    </div>
    <div class="goods">
        <div class="specific" v-if="item">                          
                <div class="specific_detail" >
                    <img v-if="item.type=='龙太子'" src="@/assets/imgs/0003.png" alt="">
                    <div class="info ">
                        <div class="row first">
                            <span class="gs" v-show="item.is_counteroffer==1"></span>
                            <span class="hj" v-if="item.is_counteroffer==2"></span>
                            <span class="name">{{item.united}}</span>
                            <span class="level">{{item.level}}级</span>
                            <span class="service">{{item.area1}}-{{item.area2}}</span>
                            <span class="platform"> 
                                <i class="apple" v-if="item.source==2"></i>
                                <i class="android" v-if="item.source==1"></i>
                            </span>
                        </div>
                        <div class="row">
                            <span class="all_point">总评分:{{item.score_total}}</span>
                            <span class="role_point">人物评分:{{item.score_role}}</span>
                            <span class="price">￥{{item.price}}</span>
                        </div>
                        <div class="row">
                            <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                {{signitem}}
                                </span>
                            <span class="sc">{{item.star}}人收藏</span>
                        </div>
                    </div>

            </div>
              
        </div>
          
    </div>
    <div class="info-c">
        <div class="content">
            <div class="common">
            商品所在服务器：{{item.area1}}-{{item.area2}}<br>
            商品编号：{{item.id}}<br>
            卖家账号：{{item.mjusername}}<br>            
            提示：<br>
            </div>
            <div v-show="item.hjstatus==2" class="agree-c">
            1）此信息表示卖家已接受您的还价请求，您可以此价格去购买商品；<br>
            2）卖家的还价价格只保留24小时，请尽快支付，以免被其它买家抢走；<br>
            3）卖家可以同时接受多个买家的还价，最快完成支付的买家将获得商品；<br>
            </div>
            <div v-show="item.hjstatus==3" class="disagree-c">
                此信息表示卖家已拒绝您的还价请求，若您仍有意购买此物，请尝试提升还价价格并密切关注商品后续变化。
            </div>
            <div v-show="item.hjstatus==0" class="overdue-c">
                此信息表示还价信息已过期,请查看最新消息。
            </div>

        </div>
    </div>
    <div class="bottom-container" >
        <div  class="overdue" v-if="item.hjstatus==0||!zt(item.hjdate)">已失效</div>
        <div class="agree" v-else-if="item.hjstatus==2" @click="toNew(item.hjstatus)">立刻购买</div>
        <div class="disagree" v-else-if="item.hjstatus==3||item.hjstatus==0"  @click="toNew(item.hjstatus)">重新还价</div>
    </div>
    
  </div>
</template>

<script >
import axios from "axios";
export default {

    data(){
        return{
            item:{},
            show:false,
        }
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
            };
        },
        
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        appear(){
            this.show=!this.show
        },
        getTime(time){
            var dateTime=new Date(time);   
            return dateTime.getFullYear()+'-'+(dateTime.getMonth()+1)+'-'+dateTime.getDate()+'   '+dateTime.getHours()+':'+dateTime.getMinutes()+':'+dateTime.getSeconds();

        },  
        yxq(time){
            var dateTime=new Date(time);   
            dateTime=dateTime.setDate(dateTime.getDate()+1);
            dateTime=new Date(dateTime);
            return dateTime.getFullYear()+'-'+(dateTime.getMonth()+1)+'-'+dateTime.getDate()+'   '+dateTime.getHours()+':'+dateTime.getMinutes()+':'+dateTime.getSeconds();

        } , 
        zt(time){
            var date=new Date()
            var dateTime=new Date(time);   
            dateTime=dateTime.setDate(dateTime.getDate()+1);
            dateTime=new Date(dateTime);
            if(date>dateTime){
                return  false;
            }
            else {
                return true;
            }

        },
        toNew(hjstatus){
            var id =this.$route.query.id
            var counter_id =this.$route.query.counter_id 
            if(hjstatus==2){
                this.$router.push({
                name: 'Shopping',
                query: {id:id}
                })
            }else if(hjstatus==3){
                this.$router.push({
                name: 'Counter',
                query: {id:id}
                })
            }

        },
        disagree(){
            var id =this.$route.query.id
            axios.post("http://81.68.253.206:8081/role/disAgreeCounterOffer",{shop_id:id},{
                headers: {
                    'token': localStorage.getItem("UserToken") }
            }
            ).then(res=>{
                if(res.data&&res.data.data&&res.data.status){
                    this.item.hjstatus=3
                }
            })               
        },       
        agree(){
            var id =this.$route.query.id   
            axios.post("http://81.68.253.206:8081/role/agreeCounterOffer",{shop_id:id},{
                headers: {
                    'token': localStorage.getItem("UserToken") }
                }
            ).then(res=>{
                if(res.data&&res.data.data&&res.data.status){
                this.item.hjstatus=2
                }
            })       
        }       
    },
    mounted(){
        var id =this.$route.query.id   
        var counter_id =this.$route.query.counter_id 
     axios.get("http://81.68.253.206:8081/page/getShopRoleById?id="+id+"&counter_id="+counter_id
    ).then(res=>{
      if(res.data&&res.data.data&&res.data.status){
        this.item=res.data.data;
      }
    })
   },


}
</script>

<style lang="scss" scoped>
.all{
    min-width: 320px;
    max-width: 750px;
    .header {
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .icon-more {
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/more.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}

.more{
    position: absolute;
    height: rem(300);
    width: rem(350);
    z-index: 999;
    top: rem(140);
    right: rem(20);
    background-color: #21202c;
    border-radius: rem(20);
    padding:0 rem(30);
    .bottom{
    border-top: 1px solid grey;
    }
    li{
        display: flex;
        width: 100%;
        height: rem(150);
        line-height:rem(150) ;
        font-size: rem(50);
        color: #fff;
        .msg{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../../assets/imgs/xinfwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .home{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../../assets/imgs/homewhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .collection{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../../assets/imgs/scwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        span{
            margin-left: rem(30);
            flex: 1;
        }
    }
}
.more::after{
    content: '';
    display: block;
    width: rem(20);
    height: rem(20);
    position: absolute;
    right: rem(40);
    top: rem(-10);
    transform: rotate(45deg);
    opacity: .93;
    background-color: #21202c;
}
.price-c{
    padding: rem(20) rem(30);
    width: 100%;
    margin-top:rem(130);
    height: rem(380);
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    text-align: center;
    .bargain{
        font-size: rem(40);
    }
    .time{
        font-size: rem(37);
        color: #888;
        margin-top: rem(10);
    }
    .cost{
        font-size: rem(40);
        text-align: left;
        margin-top: rem(30);
        .red{
            color:#e74e4b;
        }

    }

}
.goods{
    margin-top: rem(15);
    height: rem(270);
    background-color: #fff;
    padding: 0 rem(30);
    .specific_detail {
            position: relative;
            width: 100%;
            height:rem(260);
            line-height: rem(60); 
            padding:rem(40) 0;          
            img {
                float: left;
                margin-right: rem(30);
                width: rem(175);
                height: rem(175);
                border-radius: rem(15);
                border-top: 1px solid #f1f1f1;
            }
            .info {
                float: left;
                width: 60%;
                height: rem(175);

                .row {
                    width: 100%;
                    height:rem(60);
                    line-height: rem(60);
                .gs{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../../../assets/imgs/gong.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                }
                .hj{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                    }
                    .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                    }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .red {
                        color: #e74e4b;
                        font-size: rem(35);
                        border: 1px solid #e74e4b;
                        border-radius: 3px;
                        margin-right: rem(10);
                    }
                    .service {
                        position: absolute;
                        right: rem(50);
                        color: #888;
                        font-size: rem(35);
                    }

                    .platform {
                        position: absolute;
                        right: 0px;
                        margin-top: rem(5);
                    }

                    .apple {
                        display: inline-block;
                        width: rem(50);
                        height: rem(50);
                        background: url(../../../../assets/imgs/apple.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .android{
                        display: inline-block;
                        width: rem(45);
                        height: rem(45);
                        background: url(../../../../assets/imgs/android1.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .price {
                        position: absolute;
                        right: 0px;
                        font-size: rem(50);
                        font-weight: 700;
                        color: #e74e4b;
                    }

                    .sc {
                        position: absolute;
                        right: 0px;
                        color: #888;
                        font-size: rem(35);
                    }

                }
            }
        }
}
.info-c{
    width: 100%;
    margin-top: rem(15);
    background-color: #fff;
    padding: 0 rem(30);
    font-size: rem(39);
    margin-bottom: rem(150);
    .common{
        height: rem(240);

    }
    .agree-c{
        height: rem(300);
    }
    .disagree-c{
        height: rem(160);

    }
    .overdue-c{
        height: rem(120);

    }
}
.bottom-container{
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: rem(140);
    min-width: 320px;
    max-width: 750px;
    
    .agree,
    .disagree{
        height: rem(140);
        background-color: #e74e4b;    
        text-align: center;   
        font-size: rem(45);
        font-weight: 700;      
        line-height: rem(140); 
        color: #fff;

    }
    .overdue{
        height: rem(140);
        background-color: #555;    
        text-align: center;   
        font-size: rem(45);
        font-weight: 700;      
        line-height: rem(140); 
        color: #fff;

    }


}

}


    

</style>
